<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>WebQuiz</title>
</head>

<body>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/quiz_script.js"></script>


<div id="back">

<header>
  <div class="header" id="header">
    <img id="img_head" border="0" src="images/img_header.png" alt="WebQuiz" width="220" height="56"></img>
  </div>
</header>

<section>

<aside>

  <div class="middle" id="catalogs">
	<img id="img_catalogs" border="0" src="images/img_catalogs.png" alt="Catalogs" width="139" height="36"></img>
  </div>

  <div class="middle" id="highscore">
    <img id ="img_highscore" border="0" src="images/img_highscore.png" alt="Highscore" width="155" height="36"></img>
   </div>
            
</aside>

  <div class="middle" id="main">
    <p>
      <label id = "login_username">Username</label>
      <input id = "login_textfield" type = "text"/>
    </p>
  	<button id = "login_button" type = "button" name = "Login Button" onclick = "login()">Login</button>
  	<button disabled id = "start_button" type = "button" name = "Start Button" onclick = "sendStart()">Start</button>
  </div>
</section>

<footer>
  <div class="footer" id="footer">Copyright bla bla bla</div>
</footer>

</div>

</body>
</html>